<template>
	<view>
		<!-- 用户信息区 -->
		<view class="flex justify-between margin-bottom padding-sm">
			<!-- 头像 -->
			<u-image :src="detail.user.avr" width="100upx" height="100upx" mode="">
			</u-image>
			<view class="flex-sub margin-left text-white flex flex-direction justify-between">
				<view class="flex justify-between">
					<view>
						<!-- 昵称 -->
						<view class="margin-right-xs" style="display: inline-block;">
							<text>{{detail.user.nick}}</text>
						</view>
						<!-- 性别 -->
						<view class="round" v-if="detail.user.gender=='女'"
							style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
							<u-icon name="woman" color="#FF659A" size="24"></u-icon>24
						</view>
						<view class="round" v-if="detail.user.gender=='男'"
							style="display: inline-block;background-color: #4b56f1; color: #69a5ff;padding: 2upx 8upx;">
							<u-icon name="man" color="#69a5ff" size="24"></u-icon>24
						</view>
						<view class="margin-right-xs margin-top-xs uniui-color" style="font-size: 10rpx;color: silver;">
							{{detail.logicTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<view class="margin-bottom-lg">
			<!-- 文字 -->
			<view style="color: white;margin-bottom: 10px;margin-left: 10px;">
				<text> {{detail.content}}</text>
			</view>
			<!-- 图片 -->
			<view style="display: flex; flex-wrap: wrap; padding: 10rpx 10rpx;">
				<view v-for="(img,index) in detail.imgs" v-if="detail.imgs.length<=2">
					<u-image style="margin:  20rpx 20rpx;" :src="img" width="320rpx" height="320rpx" mode=""
						@click="imgPreview(index)">
					</u-image>
				</view>
				<view v-for="(img,index) in detail.imgs" v-if="detail.imgs.length==3">
					<u-image style="margin:  20rpx 20rpx;" :src="img" width="200rpx" height="200rpx" mode=""
						@click="imgPreview(index)">
					</u-image>
				</view>
				<view v-for="(img,index) in detail.imgs" v-if="detail.imgs.length==4">
					<u-image style="margin:  20rpx 20rpx;" :src="img" width="320rpx" height="320rpx" mode=""
						@click="imgPreview(index)">
					</u-image>
				</view>
				<view v-for="(img,index) in detail.imgs" v-if="detail.imgs.length>4">
					<u-image style="margin:  20rpx 20rpx;" :src="img" width="200rpx" height="200rpx" mode=""
						@click="imgPreview(index)">
					</u-image>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<qizai9527-commentList 
								:momentId="id" 
								:senderId="senderId"
								:list="commentList" 
								@clickComment="clickComment" 
								@clickUser="clickUser"
								@sureadd="sureadd"
								@del="del">
													</qizai9527-commentList>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				urls: [],
				detail: {
					user:{
						avr:""
					}
				},
				commentList: [],
				senderId:0,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getData();
			this.senderId=uni.getStorageSync("userId")
			console.log("当前动态id为:"+this.id);
		},
		methods: {
			getData() {
				//查询动态详情
				this.$myRequest({
						url: "/community/details/" + this.id,
						method: "get",
					}).then(r => {
						this.detail = r.data.data;
						this.urls = this.detail.imgs;
					}),
					//展示评论
					this.$myRequest({
						url: "/community/alldisscuss/" + this.id,
						method: "get",
					}).then(r => {
						this.commentList = r.data.data
						console.log(r);
					})
			},
			imgPreview(index) {
				console.log("查看大图")
				uni.previewImage({
					urls: this.urls,
					current: index, // 当前显示图片的http链接，默认是第一个
				})
			},
			//确认评论
			sureadd(e) {
				if(e.content==null||e.content==""){
					return;
				}else{
					e.momentId = this.id
					e.senderId = this.senderId
					this.$myRequest({
						url: '/community/discuss/adddiscuss',
						method: "POST",
						data: e,
					}).then(r=>{
						 this.commentList.push(r.data.data) 
						 console.log(r);
					})
				}
			},
			//删除
			del(e){
				this.$myRequest({
					url:'/community/discuss/deldiscuss/'+e.id,
					method:"POST",
					//date:e.id,
				}).then(r=>{
					this.commentList.splice(e.index,1)
				})
			},
			//冇用
			clickComment(e){
				console.log(e);
			}
		}
	}
</script>

<style>

</style>
